<template>
	<div class="zh-album-statistics">
		<nav-header>
			<template slot="menuBefore">
				<li><router-link to="/resources/resource/album-management" tag="a">专辑管理</router-link></li>
				<li class="gap">&gt;</li>
			</template>
			<li>上课统计</li>
		</nav-header>
		<div class="zh-table">
			<div class="zh-table-contents">
			  	<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
				    <el-tab-pane label="参加专辑人数查询" name="1">
				    	<div class="peopleSx clear">
							<el-input v-model="listParam.keyword" placeholder="请输入账号、姓名"></el-input>
							<el-button type="primary"  @click="searchFunc" style="margin-left: 10px">搜索</el-button>
							<el-button type="primary"  @click="reset" style="margin-left: 10px">重置</el-button>
				    		<span>总计上课人数：{{total_number}}</span>
				    		<el-button type="primary" class="fr" @click="exportUser()">导出列表</el-button>
				    	</div>
						<template>
							<el-table
							border
							ref="multipleTable"
							:data="listData"
							tooltip-effect="dark"
							style="width: 100%"
							v-loading="loading.status"
							:element-loading-text="loading.txt"
							>
								
								<el-table-column
									prop="usernumber"
									label="账号"
									width=""
									show-overflow-tooltip>
								</el-table-column>
								<el-table-column
									prop="user_organization"
									label="组织"
									width=""
									show-overflow-tooltip>
								</el-table-column>
								<el-table-column
									prop="username"
									label="姓名"
									show-overflow-tooltip>
								</el-table-column>
								<el-table-column
									prop="sex"
									label="性别"
									width=""
									show-overflow-tooltip>
								</el-table-column>
								<el-table-column
									prop="login_time"
									label="最后登录"
									width=""
									show-overflow-tooltip>
								</el-table-column>
								<el-table-column
									prop="email"
									label="邮箱"
									show-overflow-tooltip>
								</el-table-column>
								<el-table-column
									prop="telphone"
									label="手机"
									show-overflow-tooltip>
								</el-table-column>
							</el-table>
							<div class="table-pagination" v-if="total_number > 10">
								<el-pagination
								    @size-change="handleSizeChange"
								    @current-change="handleCurrentChange"
								    :current-page="listParam.page_index"
								    :page-sizes="[10, 20, 30, 40, 50, 100]"
								    :page-size="listParam.page_size"
								    layout="total, sizes, prev, pager, next, jumper"
								    :total="total_number">
								</el-pagination>
								<div class="pagination-button">
									<el-button 
										@click="getList"
										type="primary" icon="el-icon-refresh" 
										circle title="刷新数据" size="mini" >
									</el-button>
								</div>
							</div>
						</template>
				    </el-tab-pane>
				    <el-tab-pane label="学生上课详情" name="2">
				    	<div class="peopleSx clear">
				    		<el-input v-model="listParam2.keyword" placeholder="请输入课程名称"></el-input>
							<el-button type="primary"  @click="searchFunc2" style="margin-left: 10px">搜索</el-button>
							<el-button type="primary"  @click="reset1" style="margin-left: 10px">重置</el-button>
				    		<el-button type="primary" class="fr" @click="exportUser2()">导出列表</el-button>
				    	</div>
				    	<template>
				    		<el-table
				    		border
				    		ref="multipleTable2"
				    		:data="listData2"
				    		tooltip-effect="dark"
				    		style="width: 100%"
				    		v-loading="loading.status"
							:element-loading-text="loading.txt"
				    		>
				    			<el-table-column
				    				prop="videoname"
				    				label="课程名称"
				    				width=""
				    				show-overflow-tooltip>
				    			</el-table-column>
				    			<el-table-column
				    				prop="usercount"
				    				label="学习人数"
				    				width=""
				    				show-overflow-tooltip>
				    			</el-table-column>
				    			<el-table-column
				    				prop="is_complete"
				    				label="完成人数"
				    				show-overflow-tooltip>
				    			</el-table-column>
				    			<el-table-column
				    				prop="study_length_count_his"
				    				label="上课总时长"
				    				width=""
				    				show-overflow-tooltip>
				    			</el-table-column>
				    			<el-table-column
				    				prop="study_length_mean_his"
				    				label="平均上课时长"
				    				width=""
				    				show-overflow-tooltip>
				    			</el-table-column>
				    			<el-table-column
				    				prop="test_count"
				    				label="包含测试数量"
				    				show-overflow-tooltip>
				    			</el-table-column>
				    			<el-table-column
				    				prop="test_accuracy"
				    				label="测试平均正确率"
				    				show-overflow-tooltip>
				    			</el-table-column>
				    		</el-table>
				    		<div class="table-pagination" v-if="total_number2 > 10">
					    		<el-pagination
								    @size-change="handleSizeChange2"
								    @current-change="handleCurrentChange2"
								    :current-page="listParam2.page_index"
								    :page-sizes="[10, 20, 30, 40, 50, 100]"
								    :page-size="listParam2.page_size"
								    layout="total, sizes, prev, pager, next, jumper"
								    :total="total_number2">
								</el-pagination>
								<div class="pagination-button">
									<el-button 
										@click="getList2"
										type="primary" icon="el-icon-refresh" 
										circle title="刷新数据" size="mini" >
									</el-button>
								</div>
							</div>
				    	</template>
				    </el-tab-pane>
			  	</el-tabs>
			</div>
		</div>
	</div>
</template>
<script>
  	export default {
	    data() {
		    return {
		    	activeName: '1',
		    	loading:{
					status:false,
					txt:'获取数据...',
				},
		    	listData:[],
		    	listParam:{
					albumid:this.$route.params.id,
		       		keyword: '',
		       		page_index:1,
		       		page_size:10,
		        },
		        total_number:0,

		        listData2:[],
		    	listParam2:{
					albumid:this.$route.params.id,
		       		keyword: '',
		       		page_index:1,
		       		page_size:10,
		        },
		        total_number2:0,

		    }
		},
		watch:{

		},
		created(){
			this.getList();
		},
		methods: {
			searchFunc(){
				this.listParam.page_index = 1;
				this.getList();
			},
			reset() {
				this.listParam = {
					albumid:this.$route.params.id,
		       		keyword: '',
		       		page_index:1,
		       		page_size:10,
				}
				this.getList();
			},
			searchFunc2(){
				this.listParam2.page_index = 1;
				this.getList2();
			},
			reset1() {
				this.listParam2 = {
					albumid:this.$route.params.id,
		       		keyword: '',
		       		page_index:1,
		       		page_size:10,
				}
				this.getList2();
			},
			getList(){
		   		this.loading.status = true;
            	let success = (data=>{
								console.log(data.data.data)
            		this.loading.status = false;
            		this.listData = data.data.data;
            		this.total_number = data.data.data_sum;
            	})
            	let fail = ( data => {
            		this.loading.status = false;
            		this.$message.error(data.msg)
            	})
            	//执行请求，并将回调方法变成config成员以便鉴权过期可以执行
            	this.$ajax.get('api/album/get_fav_album',{params: this.listParam,func:{success:success,fail:fail}})
            },
            getList2(){
		   		this.loading.status = true;
            	let success = (data=>{
            		this.loading.status = false;
            		this.listData2 = data.data.data;
            		this.total_number2 = data.data.data_sum;
            	})
            	let fail = ( data => {
            		this.loading.status = false;
            		this.$message.error(data.msg)
            	})
            	//执行请求，并将回调方法变成config成员以便鉴权过期可以执行
            	this.$ajax.get('api/album/get_album_class',{params: this.listParam2,func:{success:success,fail:fail}})
            },
			handleClick(tab, event) {
				if( parseInt(tab.index) === 0 ){
					this.listParam.page_index = 1;
					this.getList();
				}else{
					this.listParam2.page_index = 1;
					this.getList2();
				}
			},
			handleSizeChange(val) {
		    	this.listParam.page_index = 1;
		    	this.listParam.page_size = val;
		    	this.getList()
		    },
		    handleCurrentChange(val) {
		    	this.listParam.page_index = val;
		    	this.getList();
		    },
		    handleSizeChange2(val) {
		    	this.listParam2.page_index = 1;
		    	this.listParam2.page_size = val;
		    	this.getList2()
		    },
		    handleCurrentChange2(val) {
		    	this.listParam2.page_index = val;
		    	this.getList2();
		    },
			exportUser(){
				if(this.listData.length === 0 ){
					this.$message.warning('导出数据为空');
					return false;
                }

                let params = {
                    id: this.$route.params.id,
                    keyword: this.listParam.keyword
                }

                this.export_excel('api/album/manage_album_user_excel', params, '参加专辑人数');
	    	},
	    	exportUser2(){
	    		if(this.listData2.length === 0 ){
					this.$message.warning('导出数据为空');
					return false;
                }

                let params = {
                    id: this.$route.params.id,
                    keyword: this.listParam2.keyword
                }

                this.export_excel('api/album/manage_album_class_excel', params, '学生上课详情');
	    	},
		},
  	}
</script>
<style lang="scss">
	.zh-album-statistics {
		.zh-table-contents {
			margin-top: -10px;
		}

		.el-tabs__nav-scroll {
		    overflow: hidden;
		    position: fixed;
		    top: 73px;
		    right: 45px;
		    z-index: 999;
		}
		.statistics-lk{
			display: inline-block;
			vertical-align: top;
			margin-left: 100px;
			span{
				color: #000;
			}
		}
		.peopleSx {
			margin-bottom: 20px;
		    .el-input{
		    	width: 300px;
		    	.el-input__suffix{
		    		background: #348EFC;
		    		right: 0;
		    		width: 44px;
		    		color: #fff;
		    		border-radius: 0 4px 4px 0;
		    	}
		    }
		    >span{
		    	margin-left: 20px;
		    	color: #666;
		    }
		}
	}
</style>